import React, { Component } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

import FilmItem from './FilmItem';
import FilmDetail from './FilmDetail';

import GlobalContext from './Context';

import './css/index.css';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      film: {},
    };
    findFilmsPage().then((res) => {
      console.log(res);

      this.setState({
        list: res.films,
      });
    });
  }

  render() {
    return (
      <GlobalContext.Provider
        value={{
          film: this.state.film,
          changeFilm: (film) => this.setState({ film }),
        }}>
        <div className='app'>
          <div>
            {this.state.list.map((item) => {
              return (
                <FilmItem
                  key={item.filmId}
                  {...item}></FilmItem>
              );
            })}
          </div>
          <div>
            <FilmDetail></FilmDetail>
          </div>
        </div>
      </GlobalContext.Provider>
    );
  }
}
